<template>
  <div class="lcds-root-container">
    <div
      class="lc-form lc-form__adaptive-parent"
      style="
        pointer-events: var(--pointer-events);
        --padding-top: 20px;
        --padding-right: 20px;
        --padding-bottom: 20px;
        --padding-left: 20px;
        --formItemSpace: 0px;
        --label-width: 100px;
      "
    >
      <el-form
        ref="formRef"
        :model="formModel"
        :rules="rules"
        :disabled="status === 'preview'"
        label-width="100px"
      >
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="订单名称11111"
            prop="orderName"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.orderName"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="订单编码22"
            prop="orderCode"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.orderCode"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="编码"
            prop="id"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.id"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="订单明细表列表"
            prop="myOrderItemDtoList"
            style="width: 100%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <lc-editor-table
                v-model="formModel.myOrderItemDtoList"
                ref="myOrderItemDtoListRef"
                :columns="myOrderItemDtoListColumns"
                input-width="120px"
                :rowOperates="['add', 'delete']"
                style="--form-input-width: 120px"
              >
                <template #input1="scope">
                  <el-input
                    class="lc-input"
                    v-model="scope.row.input1"
                    placeholder="请输入"
                  >
                  </el-input>
                </template>

                <template #input2="scope">
                  <el-input
                    class="lc-input"
                    v-model="scope.row.input2"
                    placeholder="请输入"
                  >
                  </el-input>
                </template>
              </lc-editor-table>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="更新时间"
            prop="updateTime"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-date-picker
                class="lc-date-time-picker"
                v-model="formModel.updateTime"
                placeholder="请选择日期时间"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="更新人id"
            prop="updateBy"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input-number
                class="lc-input-number"
                v-model="formModel.updateBy"
                :controls="true"
                placeholder="请输入"
              ></el-input-number>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="创建时间"
            prop="createTime"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-date-picker
                class="lc-date-time-picker"
                v-model="formModel.createTime"
                placeholder="请选择日期时间"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="订单商品数量"
            prop="orderGoodsCount"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input-number
                class="lc-input-number"
                v-model="formModel.orderGoodsCount"
                :controls="true"
                placeholder="请输入"
              ></el-input-number>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="订单金额"
            prop="orderAmount"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <lc-input-amount
                class="lc-input-amount"
                v-model="formModel.orderAmount"
                :maxDecimalDigits="2"
                :maxIntegerDigits="15"
                :clearable="false"
                placeholder="请输入"
              >
              </lc-input-amount>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="是否安排用餐"
            prop="isMeals"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-select
                class="lc-select"
                v-model="formModel.isMeals"
                :clearable="true"
                placeholder="请选择"
              >
                <el-option
                  v-for="option in isMealsOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                >
                </el-option
              ></el-select>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="编码"
            prop="id"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.id"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="是否安排用车"
            prop="isCar"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-select
                class="lc-select"
                v-model="formModel.isCar"
                :clearable="true"
                placeholder="请选择"
              >
                <el-option
                  v-for="option in isCarOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                >
                </el-option
              ></el-select>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="住宿费（元/天）"
            prop="accommodationFee"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <lc-input-amount
                class="lc-input-amount"
                v-model="formModel.accommodationFee"
                :maxDecimalDigits="2"
                :maxIntegerDigits="15"
                :clearable="false"
                placeholder="请输入"
              >
              </lc-input-amount>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="住宿费标准"
            prop="accommodationFeeStandard"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <lc-input-amount
                class="lc-input-amount"
                v-model="formModel.accommodationFeeStandard"
                :maxDecimalDigits="2"
                :maxIntegerDigits="15"
                :clearable="false"
                placeholder="请输入"
              >
              </lc-input-amount>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="备注"
            prop="remark"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <span class="lc-label">
                {{ formModel.remark }}
              </span>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="附件"
            prop="attachments"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.attachments"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="申请细则"
            prop="applicationDetails"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.applicationDetails"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="审批节点"
            prop="approvalNode"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.approvalNode"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="专业室领导意见"
            prop="professionIdea"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.professionIdea"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="院（中心、部门）负责人意见"
            prop="courtidea"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.courtidea"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="总院主管总师意见"
            prop="mainIdea"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.mainIdea"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="创建者"
            prop="createdBy"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.createdBy"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="创建时间"
            prop="createdTime"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-date-picker
                class="lc-date-time-picker"
                v-model="formModel.createdTime"
                placeholder="请选择日期时间"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="更新者"
            prop="updatedBy"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.updatedBy"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="更新时间"
            prop="updatedTime"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-date-picker
                class="lc-date-time-picker"
                v-model="formModel.updatedTime"
                placeholder="请选择日期时间"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="受邀/派遣"
            prop="invitationOrDispatch"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.invitationOrDispatch"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="主办单位"
            prop="organizer"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.organizer"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="任务"
            prop="task"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <span class="lc-label">
                {{ formModel.task }}
              </span>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="被授权人联系方式"
            prop="authorizedContactInfo"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.authorizedContactInfo"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="被授权人"
            prop="authorizedPerson"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.authorizedPerson"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="出行方式"
            prop="travelMode"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.travelMode"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="会议/注册费（元）"
            prop="registrationFee"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <lc-input-amount
                class="lc-input-amount"
                v-model="formModel.registrationFee"
                :maxDecimalDigits="2"
                :maxIntegerDigits="15"
                :clearable="false"
                placeholder="请输入"
              >
              </lc-input-amount>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="外出地点"
            prop="placeOfDeparture"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <span class="lc-label">
                {{ formModel.placeOfDeparture }}
              </span>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="结束时间"
            prop="endDate"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-date-picker
                class="lc-date-picker"
                v-model="formModel.endDate"
                placeholder="请选择日期"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="开始时间"
            prop="startDate"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-date-picker
                class="lc-date-picker"
                v-model="formModel.startDate"
                placeholder="请选择日期"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="出差人员最高职位"
            prop="topJob"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.topJob"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="人数"
            prop="peopleNum"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input-number
                class="lc-input-number"
                v-model="formModel.peopleNum"
                :controls="true"
                placeholder="请输入"
              ></el-input-number>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="出差人所在院（中心、部门）室"
            prop="businessDepartment"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.businessDepartment"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="出差人"
            prop="businessTraveler"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.businessTraveler"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="所在院（中心、部门）"
            prop="department"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.department"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item
            class="lc-form-item"
            label="申请人"
            prop="applyId"
            style="width: 33.3333%"
          >
            <div class="lc-form-item__box" style="--form-input-width: 100%">
              <el-input
                class="lc-input"
                v-model="formModel.applyId"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <div
          v-if="btnGroupVisible"
          class="lc-buttonGroup lc-buttonGroup__level lc-buttonGroup__center"
          style="justify-content: center"
        >
          <el-button
            class="lc-button"
            style="--color: #b16161"
            @click="resetFormRef"
          >
            取消
          </el-button>
          <el-button
            class="lc-button"
            type="primary"
            style="--color: #b16161"
            @click="submitFormRef"
          >
            保存
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";

import { request } from "@/apis/request";
defineOptions({
  name: "OrderForm",
});

const emit = defineEmits(["submit"]);

const props = defineProps({
  btnGroupVisible: { type: Boolean, default: true },
  status: { type: String, default: "" },
  id: { type: String, default: "" },
});

const formModel = ref({
  orderName: "",
  orderCode: "",
  id: "",
  myOrderItemDtoList: [],
  updateTime: "",
  updateBy: "",
  createTime: "",
  orderGoodsCount: "",
  orderAmount: "",
  isMeals: "",
  isCar: "",
  accommodationFee: "",
  accommodationFeeStandard: "",
  remark: "",
  attachments: "",
  applicationDetails: "",
  approvalNode: "",
  professionIdea: "",
  courtidea: "",
  mainIdea: "",
  createdBy: "",
  createdTime: "",
  updatedBy: "",
  updatedTime: "",
  invitationOrDispatch: "",
  organizer: "",
  task: "",
  authorizedContactInfo: "",
  authorizedPerson: "",
  travelMode: "",
  registrationFee: "",
  placeOfDeparture: "",
  endDate: "",
  startDate: "",
  topJob: "",
  peopleNum: "",
  businessDepartment: "",
  businessTraveler: "",
  department: "",
  applyId: "",
});
const myOrderItemDtoListColumns = ref([
  { prop: "input1", label: "输入列1", required: false, summary: false },
  { prop: "input2", label: "输入列2", required: false, summary: false },
]);
const myOrderItemDtoListData = ref([]);
const myOrderItemDtoListRef = ref(null);
const isMealsOptions = ref([]);
const isCarOptions = ref([]);
const formRef = ref(null);
const loading = ref(false);
const rules = ref({});
const searches = new URLSearchParams(document.location.search.substring(1));
const formStatus = props.status || searches.get("status") || "add";

const resetFormRef = () => {
  unref(formRef).resetFields();
};
const submitFormRef = async () => {
  const validated = await unref(formRef).validate();
  if (validated) {
    let params;
    if (formRefStatus === "add") {
      params = { url: "", method: "get", data: { ...formModel.value } };
    } else if (formRefStatus === "edit") {
      params = { url: "", method: "get", data: { ...formModel.value } };
    }
    loading.value = true;
    const res = request(params)
      .then((res = {}) => {
        if (res.success) {
          ElMessage({
            message: "操作成功",
            type: "success",
          });
          emit("submit", "success");
          return "success";
        } else {
          ElMessage({
            message: res.message,
            type: "error",
          });
          emit("submit", "failed");
          return "failed";
        }
      })
      .finally(() => {
        loading.value = false;
      });
    return res;
  }
};
const queryFormData = (queryData = {}) => {
  let params = { url: "", method: "" };
  loading.value = true;
  return request({
    ...params,
    params: {
      ...queryData,
    },
  })
    .then((res = {}) => {
      const data = res.data || {};
      Object.keys(data).forEach((key) => {
        formModel.value[key] = [null, undefined].includes(data[key])
          ? formModel.value[key]
          : data[key];
      });
    })
    .finally(() => {
      loading.value = false;
    });
};

onBeforeMount(() => {
  if (["edit", "preview"].includes(formStatus)) {
    const primaryKeyVal = props.id || searches.get("id ");
    formModel.value.id = primaryKeyVal;
    queryFormData({
      id: primaryKeyVal,
    });
  }
});
</script>
